<template>
  <div class="content" :span="18">
    <div class="main">
      <el-scrollbar>
        <div v-for="item in blogList" :key="item.blogId">
          <BlogItem
            :cover="item.cover"
            :title="item.title"
            :summary="item.summary"
            :nickName="item.nickName"
            :createTime="item.createTime"
            :categoryName="item.categoryName"
            :blogId="item.blogId"
            :categoryId="item.categoryId"
            :userId="item.userId"
          />
        </div>
      </el-scrollbar>
    </div>
    <el-pagination
      :current-page="pageInfo.pageNo"
      :page-size="10"
      background
      layout="total, prev, pager, next, jumper"
      :total="pageInfo.totalCount"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onBeforeMount } from "vue";
const { proxy } = getCurrentInstance();

// 部署前执行
onBeforeMount(() => {
  getBlogList();
});

// 获取博客列表
const blogList = ref([]);
const getBlogList = async () => {
  let result = await proxy.Request({
    url: "/view/loadBlogList",
    params: {
      pageNo: pageInfo.pageNo,
      pageSize: 10
    },
  });
  if (!result) {
    return;
  }
  blogList.value = result.data.list;
  pageInfo.pageNo = result.data.pageNo;
  pageInfo.totalCount = result.data.totalCount;
};

// 页码
const pageInfo = reactive({
  pageNo: 1,
  totalCount: 0,
});
// 页码改变
const handleCurrentChange = (val) => {
  pageInfo.pageNo = val;
  getBlogList();
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 10px;
  min-width: 630px;
  max-height: calc(100vh - 140px);
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 #ddd;
  border-radius: 10px;

  .main {
    margin-bottom: 8px;
    height: calc(100vh - 200px);
    box-sizing: border-box;
  }
}
</style>